<template>
  <div class="right-header">
    <ul class="right-header_nav">
      <template v-for="(item, index) in tabList">
        <slot :row="item">
          <li class="item active" :key="index">{{ item.title }}</li>
        </slot>
      </template>
    </ul>
    <!-- 右边自定义 -->
    <slot name="right"></slot>
  </div>
</template>
<script>
export default {
  props: {
    tabList: {
      type: Array,
      default() {
        return []
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.right-header {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ebeef5;
  .right-header_nav {
    display: flex;
    margin: 0;
    padding: 0;
    ::v-deep .item {
      list-style: none;
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      margin-right: 40px;
      &.active {
        border-bottom-style: solid;
        border-bottom-width: 2px;
        margin-bottom: -1px;
        @include edu-color-primary(border-color);
        @include edu-color-auxiliary;
      }
      &.pointer {
        cursor: pointer;
      }
    }
  }
}
</style>
